<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="/static/assets/css/layui.css">
    <title>添加用户信息</title>
</head>
<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-row">
        <form class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户昵称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userName" id="userName" required  lay-verify="required|userName" placeholder="请输入用户昵称" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">真实姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="realName" id="realName" required  lay-verify="required|realName" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="userPwd" id="userPwd" required  lay-verify="required" placeholder="请输入用户密码" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userTel" id="userTel" required  lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input" maxlength="11">
                        <span class="hint_str"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-inline">
                        <select name="roleId" id="roleId" lay-verify="required">
                            <option value=""></option>
                            <option value="1">超级管理员</option>
                            <option value="2">管理员</option>
                            <option value="3">体验用户</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-left: 80px">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-lg" lay-submit lay-filter="add">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary layui-btn-lg">重置</button>
                    </div>
                </div>
            </form>
    </div>
</div>
</body>
</html>
<script src="/static/assets/layui.all.js"></script>
<script src="/static/assets/jquery.min.js"></script>
<script src="/static/assets/md5.js"></script>
<script src="/static/assets/limit.js"></script>
<script>
    $(function () {

        layui.use(['form','layer'], function(){
                var form = layui.form
                    ,layer = layui.layer;

                form.verify({
                    realName:[
                        /^[\u4e00-\u9fa5]{2,6}$/
                        ,'姓名格式不正确'
                    ],
                    userName:[
                        /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/
                        ,'用户名须以字母开头且长度不能低于5位'
                    ]

                });

                form.on('submit(add)', function(data){
                    console.log(data)
                    data.field.userPwd = hex_md5(data.field.userPwd)
                    layer.confirm('您确定要增加系统用户吗？', {
                        btn: ['确定','取消'] //按钮
                    }, function() {
                        $.ajax({
                            url: "/user/addUser"
                            , type: "post"
                            , dataType: "json"
                            , data: data.field
                            , success: function (res) {
                                if (res.code === 200) {
                                    layer.msg("添加成功")
                                    toParent()
                                } else if (res.code === 0) {
                                    layer.msg("添加失败")
                                } else {
                                    layer.msg("用户名已存在，请重新填写")
                                }
                            }
                        })
                    }, function(){
                        layer.msg('已取消', {
                            time: 2000, //20s后自动关闭
                        });
                    });
                    return false;
                })
            })

    })

</script>